<template>
  <div class="q-pa-md">
<!--    
    <t-data-grid ref="dataGrid1" :showStriped="true" :showRowNumber="true" :selection="selection" title="Treats" :rows="rows" v-model:columnsFilter="columnsFilter"
      :optColumns="optColumns" v-model:selected="selected" :row-key="rowKey" :loading="loading" height="fill"
      v-model:pagination="pagination" @request="onRequest" :columnLinkFormat="columnLinkFormat"></t-data-grid> -->
    <t-data-grid ref="dataGrid2" title="PageSize" :rows="rows"
      v-model:columnsFilter="columnsFilter" :optColumns="optColumns" :row-key="rowKey"
      :loading="loading" :pageIndex="pagination.page" :pageSize="pagination.rowsPerPage"
      @pageChange='OnPageChange'
      @pageSizeChange='OnPageSizeChange'
      :rowsNumber="pagination.rowsNumber" @request="onRequest" :columnLinkFormat="columnLinkFormat"></t-data-grid>
  </div>
</template>

<script>
import options from './options';

import { onMounted, ref } from 'vue';
export default {
  setup() {
    const rows = ref([]);

    const pagination = ref({
      // sortBy: 'desc',
      // descending: false,
      page: 1,
      rowsPerPage: 3,
      rowsNumber: 2001,
    });

    const loading = ref(false);

    const selection = ref('none');

    function onRequest(props) {
      debugger;
      const { page, rowsPerPage, sortBy, descending } = props.pagination;
      const filter = props.filter;

      loading.value = true;

      ((function (props) {
        
        /** Start OnRequest Script */
        const { page, rowsPerPage, sortBy, descending, rowsNumber } = props.pagination;
        const filter = props.filter;
        const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

        const startRow = (page - 1) * rowsPerPage;

        return fetch(
          `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
        ).then(response => {
          return response.json().then(movies => {

            let returnValue = {
              rows: movies,
              rowsNumber: 2001,
              page: page,
              rowsPerPage: rowsPerPage,
            }

            return returnValue;
          });
        });
        /** END OnRequest Script */
      })(props)).then(response => {
        rows.value.splice(0, rows.value.length, ...response.rows);
        pagination.value.rowsNumber = response.rowsNumber;
        pagination.value.page = response.page;
        pagination.value.rowsPerPage = response.rowsPerPage;
        loading.value = false;
      })
    }

    function OnPageChange(page) {
      debugger;
      alert('OnPageChange')
      // pagination.value.page = page;
      // fetchFromServer(pagination.value, '');
    }

    function OnPageSizeChange(){
      debugger;
      alert('OnPageSizeChange')
    }

    let Widget = {};
    onMounted(() => {
      Widget.dataGrid1 = vm.dataGrid1.value;
      Widget.dataGrid2 = vm.dataGrid2.value;
      // fetchFromServer(pagination.value, '');
      Widget.dataGrid2.query()
    });

     let vm = {
      columnLinkFormat: field => {
        debugger;
        console.log(field, Widget.dataGrid1.cellClickInfo.data[field]);
        // alert(Widget.dataGrid1.cellClickInfo.data[field]);
      },
      dataGrid2: ref(),
      dataGrid1: ref(),
      pagination: pagination,
      selection: selection,
      selected: ref([]),
      rowKey: options.idField,
      columnsFilter: ref(true),
      selectOpts: ['none', 'multiple', 'single'],
      optColumns: options.columns,
      // ...useOpts({ optColumns: options.columns }).value, // columns,visibleColumns
      rows,
      loading,
      onRequest,
      OnPageChange,
      OnPageSizeChange
    };
    return vm;
  },
};
</script>
